<template>
	<div class="customer_analysis">
		<x-header :title="headerTitle" :left-options="{backText: '关闭'}">
		</x-header>
		<!-- 顾客数据 -->
		<div class="content" v-if="selectIndex === 0">
			<div class="time_nav">
				<div class="tab_time_nav">
					<tab>
						<tab-item :selected="selectIndex1===0" @on-item-click="onItemClick">昨日</tab-item>
						<tab-item :selected="selectIndex1===1" @on-item-click="onItemClick">近7天</tab-item>
						<tab-item :selected="selectIndex1===2" @on-item-click="onItemClick">近30天</tab-item>
					</tab>
				</div>
			</div>
			<div class="overview">
				<div class="overview_header">
					<div class="overview_header_text">
						<p>
							<img src="../../assets/images/statistics/blue2.jpg" alt="" />
							<span>总览</span>
							<img src="../../assets/images/statistics/help.jpg" alt="" />
						</p>
					</div>
					<div class="overview_header_date" v-if="selectIndex1===0"></div>
					<div class="overview_header_date" v-if="selectIndex1===1">{{ data2 }}~{{ data1 }}</div>
					<div class="overview_header_date" v-if="selectIndex1===2">{{ data3 }}~{{ data1 }}</div>
				</div>
				<div class="order_number">
					<div class="order_number_sum">
						<p>下单人数</p>
						<p><span>0</span>人</p>
						<p v-if="selectIndex1===0">较前日--持平</p>
						<p v-if="selectIndex1===1">较上7日--持平</p>
						<p v-if="selectIndex1===2">较上30日--持平</p>
					</div>
					<div class="order_number_date">
						<span v-if="selectIndex1===0||selectIndex1===1">{{ data2.slice(5) }}</span>
						<span v-if="selectIndex1===2">{{ data3.slice(5) }}</span>
						<img src="../../assets/images/statistics/seven_days.jpg" alt="" />
						<span>{{ data1.slice(5) }}</span>
					</div>
				</div>
				<div class="customer_ratio">
					<div class="new_customer_ratio">
						<p>新客</p>
						<p><span>0</span>人</p>
						<p v-if="selectIndex1===0">较前日--持平</p>
						<p v-if="selectIndex1===1">较上7日--持平</p>
						<p v-if="selectIndex1===2">较上30日--持平</p>
						<div class="new_ratio">
							<p>占--%</p>
							<div class="progress_p">
								<x-progress :percent="percent1"></x-progress>
							</div>
						</div>
					</div>
					<div class="new_customer_ratio old_customer_ratio">
						<p>老客</p>
						<p><span>0</span>人</p>
						<p v-if="selectIndex1===0">较前日--持平</p>
						<p v-if="selectIndex1===1">较上7日--持平</p>
						<p v-if="selectIndex1===2">较上30日--持平</p>
						<div class="new_ratio">
							<p>占--%</p>
							<div class="progress_p">
								<x-progress :percent="percent2"></x-progress>
							</div>
						</div>
					</div>
				</div>
				<div class="days_data" v-if="selectIndex1 !== 0">
					<div class="set_welfares">
						<div class="set_welfare">
							<div class="set_welfare_top" @click="goActivity">
								<p>
									<img src="../../assets/images/statistics/store.jpg" alt="" />
									<span>您的门店没有新客</span>
								</p>
								<p>
									<span>立即设置</span>
									<img src="../../assets/images/statistics/right_arrow2.jpg" alt="" />
								</p>
							</div>
							<div class="set_welfare_bottom">尝试设置"领取优惠"吸引更多顾客下单</div>
						</div>
					</div>
					<div class="repeat_order">
						<div class="overview_header">
							<div class="overview_header_text">
								<p>
									<img src="../../assets/images/statistics/blue2.jpg" alt="" />
									<span>重复下单</span>
									<img src="../../assets/images/statistics/help.jpg" alt="" />
								</p>
							</div>
							<div class="overview_header_date" v-if="selectIndex1===0"></div>
							<div class="overview_header_date" v-if="selectIndex1===1">{{ data2 }}~{{ data1 }}</div>
							<div class="overview_header_date" v-if="selectIndex1===2">{{ data3 }}~{{ data1 }}</div>
						</div>
						<div class="repeat_order_info">
							<div class="repeat_order_ratio">
								<p>重复下单率</p>
								<p><span>0</span>%</p>
								<p>较上7日--持平</p>
							</div>
							<div class="repeat_order_customer">
								<p>重复下单顾客</p>
								<p><span>0</span>人</p>
								<p>较上7日--持平</p>
							</div>
						</div>
						<div class="probably_issues">
							<div class="probably_issue">暂未发现经营问题，请保持关注！</div>
						</div>
					</div>
					<div class="customer_trend">
						<div class="customer_trend_header">
							<img src="../../assets/images/statistics/blue2.jpg" alt="" />
							<p>顾客趋势<span>（点击查看每日详情）</span></p>
						</div>
						<div class="trend_infos">
							<div class="trend_btns">
								<tab>
									<tab-item selected @on-item-click="onItemClick2">下单顾客</tab-item>
									<tab-item @on-item-click="onItemClick2">新顾客</tab-item>
									<tab-item @on-item-click="onItemClick2">老顾客</tab-item>
								</tab>
							</div>
						</div>
						<div class="charts_info">
							<div class="charts_info_top">
								<p>
									<img class="img_1" src="../../assets/images/statistics/blue2.jpg" alt="" />
									<span>我的</span>
								</p>
								<p>
									<img class="img_2" src="../../assets/images/statistics/same_trade.jpg" alt="" />
									<span>同行优秀</span>
								</p>
								<p>
									<img class="img_3" src="../../assets/images/statistics/activity.jpg" alt="" />
									<span>上下线活动</span>
								</p>
								<p>
									<img class="img_4" src="../../assets/images/statistics/sort.jpg" alt="" />
									<span>排序特权期</span>
								</p>
							</div>
							<div class="charts_details">
								<div class="charts_detail">
									<x-chart :id="id" :option="option"></x-chart>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 顾客爱好 -->
		<div class="content2" v-if="selectIndex === 1">
			<div class="contents_top">
				<img src="../../assets/images/statistics/blue2.jpg" alt="" />
				<p>本店顾客爱好<span>（牢记本店顾客爱好，继续加油）</span></p>
			</div>
			<div class="like_goods">
				<div class="like_goods_nav">
					<tab>
						<tab-item selected @on-item-click="onItemClick3">爱买的商品</tab-item>
						<tab-item @on-item-click="onItemClick3">喜欢的活动</tab-item>
					</tab>
				</div>
				<div class="like_goods_infos">
					<div class="like_goods_info" v-if="goodsData">
						有顾客
					</div>
					<div class="like_goods_no" v-if="!goodsData">
						<img src="../../assets/images/statistics/none.jpg" alt="" />
						<p>您无下单顾客，请加油！</p>
					</div>
				</div>
			</div>
			<div class="contents_top">
				<img src="../../assets/images/statistics/blue2.jpg" alt="" />
				<p>同行顾客爱好<span>（挖掘可扩展的商品和活动）</span><img @click="sames" src="../../assets/images/activity/question.png" alt="" /></p>
			</div>
			<div class="hobby_infos">
				<div class="hobby_info" v-if="hobbyData">
					有重合孤苦
				</div>
				<div class="hobby_no" v-if="!hobbyData">
					<img src="../../assets/images/statistics/none.jpg" alt="" />
					<p>您的门店独一无二，未找到与您有重合顾客的门店，请保持关注！</p>
				</div>
			</div>
			<!-- 同行顾客阴影 -->			
			<x-dialog v-model="showToast">
				<div class="dialog_desc">
					<img src="../../assets/images/activity/same_c.jpg" alt="" />
					<div @click="showToast=false"></div>
				</div>
			</x-dialog>			
		</div>
		<!-- 顾客结构 -->
		<div class="content3" v-if="selectIndex === 2">
			<div class="liveness">
				<tab>
					<tab-item selected @on-item-click="onItemClick4">顾客活跃度</tab-item>
					<tab-item @on-item-click="onItemClick4">顾客价值</tab-item>
				</tab>
			</div>
			<div class="customer_acti" v-if="selectIndex4 === 0">
				<div class="content3_chart">
					<y-chart :id="id2" :option="option2"></y-chart>
				</div>
				<div class="customer_text">
					<div class="customer_class">
						<p>顾客分类</p>
						<p>最后一次成交在近</p>
					</div>
					<div class="active_customer">
						<p>活跃顾客<span>（0人）</span></p>
						<p>1-30天</p>
					</div>
					<div class="active_customer">
						<p>沉默顾客<span>（0人）</span></p>
						<p>30-60天</p>
					</div>
					<div class="active_customer">
						<p>流失顾客<span>（0人）</span></p>
						<p>60-90天</p>
					</div>
				</div>
				<div class="edit_group" @click="goEditGroup">
					<p>点击编辑顾客分组</p>
					<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
				</div>
			</div>
			<div class="customer_value" v-if="selectIndex4 === 1">
				<div class="customer_value_tab">
					<tab>
						<tab-item selected @on-item-click="onItemClick5">昨日</tab-item>
						<tab-item @on-item-click="onItemClick5">近7天</tab-item>
						<tab-item @on-item-click="onItemClick5">近30天</tab-item>
					</tab>
				</div>
				<div class="customer_value_chart_1">
					<z-chart :id="id3" :option="option3"></z-chart>
				</div>
				<div class="customer_value_chart_2">
					<m-chart :id="id4" :option="option4"></m-chart>
				</div>
			</div>
		</div>
		<footer>
			<p @click="switchs(0)">
				<img v-if="selectIndex===0" src="../../assets/images/statistics/statis_selected.png" alt="" />
				<img v-else src="../../assets/images/statistics/statis.png" alt="" />
				<span :class="{selected:selectIndex===0}">顾客数据</span>
			</p>
			<p @click="switchs(1)">
				<img v-if="selectIndex===1" src="../../assets/images/statistics/hobby_selected.png" alt="" />
				<img v-else src="../../assets/images/statistics/hobby.png" alt="" />
				<span :class="{selected:selectIndex===1}">顾客偏好</span>
			</p>
			<p @click="switchs(2)">
				<img v-if="selectIndex===2" src="../../assets/images/statistics/structure_selected.png" alt="" />
				<img v-else src="../../assets/images/statistics/structure.png" alt="" />
				<span :class="{selected:selectIndex===2}">顾客结构</span>
			</p>
		</footer>
	</div>
</template>

<script>
	import { XHeader, Tab, TabItem, XProgress, XDialog } from 'vux';
	import XChart from '@/page/statistics/charts';
	import YChart from '@/page/statistics/liveChart';
	import ZChart from '@/page/statistics/valueChart';
	import MChart from '@/page/statistics/moneyChart';
	import options from '@/assets/js/options';
	import option22 from '@/assets/js/live_option';
	import option33 from '@/assets/js/value_option';
	import option44 from '@/assets/js/money_option';
	export default {
		name: 'customer_analysis',
		data() {
			let option = options.bar;
			let option2 = option22.bar;
			let option3 = option33.bar;
			let option4 = option44.bar;
			return {
				id: 'test',
				option: option,
				id2: 'test2',
				option2: option2,
				id3: 'test3',
				option3: option3,
				id4: 'test4',
				option4: option4,
				percent1: 60, //新客户所占比例
				percent2: 30, //老客户所占比例
				selectIndex: 0, //0-顾客数据  1-顾客偏好  2-顾客结构
				selectIndex1: 0, //0-昨日  1-近7天  2-近30天
				selectIndex2: 0, //0-下单顾客  1-新顾客  2-老顾客
				selectIndex3: 0, //0-爱买的商品  1-喜欢的活动
				selectIndex4: 0, //0-顾客活跃度  1-顾客价值
				selectIndex5: 0, //顾客价值 0-昨日  1-近7天  2-近30天
				goodsData: '',
				hobbyData: '',
				data1: '', //前1日数据
				data2: '', //前7日数据
				data3: '', //前30日数据
				showToast: false, //
			}
		},
		components: {
			XChart,
			YChart,
			ZChart,
			MChart,
			XHeader,
			Tab,
			TabItem,
			XProgress,
			XDialog
		},
		computed: {
			//头部标题文字
			headerTitle() {
				if(this.selectIndex === 0) {
					return '顾客分析-顾客数据';
				} else if(this.selectIndex === 1) {
					return '顾客分析-顾客偏好';
				} else if(this.selectIndex === 2) {
					return '顾客分析-顾客结构';
				}
			},
		},
		created() {
			this.selectIndex1 = +this.$route.params.id;
			let myDate = new Date();
			myDate.setDate(myDate.getDate() - 1);
			let sevenDate = new Date();
			sevenDate.setDate(sevenDate.getDate() - 7);
			let thirtyDate = new Date();
			thirtyDate.setDate(thirtyDate.getDate() - 30)
			this.data1 = this.formats(myDate.getTime());
			this.data2 = this.formats(sevenDate.getTime());
			this.data3 = this.formats(thirtyDate.getTime());
		},
		methods: {
			//切换时间
			onItemClick(index) {
				this.selectIndex1 = index;
			},
			//切换顾客
			onItemClick2(index) {
				this.selectIndex2 = index;
			},
			//切换爱买的商品
			onItemClick3(index) {
				this.selectIndex3 = index;
			},
			//切换顾客活跃度
			onItemClick4(index) {
				this.selectIndex4 = index;
			},
			//顾客价值 切换时间
			onItemClick5(index) {
				this.selectIndex5 = index;
			},
			//底部切换
			switchs(id) {
				this.selectIndex = id;
			},
			//设置活动
			goActivity() {
				this.$router.push('/actList/0');
			},
			//同行顾客爱好
			sames() {
				this.showToast = true;
			},
			//编辑分组
			goEditGroup(){
				this.$router.push('/editGroup');
			},
			//时间格式化
			formats(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "." + m + "." + d;
			},
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.customer_analysis {
		.content {
			padding-bottom: .8rem;
			.time_nav {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				padding: .2rem 0;
				.tab_time_nav {
					width: 90%;
					height: 90%;
				}
			}
			.overview {
				margin: .28rem 0;
				background: #fff;
				.overview_header {
					height: 1.1rem;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #f0f0f0;
					.overview_header_text {
						p {
							display: flex;
							align-items: center;
							img:nth-of-type(1) {
								width: .07rem;
								height: .39rem;
							}
							img:nth-of-type(2) {
								width: .32rem;
								height: .32rem;
							}
							span {
								font-size: .34rem;
								color: #1f1f1f;
								font-weight: 700;
								margin: 0 .16rem;
							}
						}
					}
					.overview_header_date {
						color: #999;
						padding-right: .2rem;
					}
				}
				.order_number {
					width: 90%;
					height: 2.94rem;
					margin: 0 auto;
					border-bottom: 2px dashed #f0f0f0;
					display: flex;
					.order_number_sum {
						text-align: left;
						p {
							margin-top: .3rem;
						}
						p:nth-of-type(1) {
							color: #999;
						}
						p:nth-of-type(2) {
							color: #333;
							span {
								font-size: .4rem;
								font-weight: 700;
							}
						}
						p:nth-of-type(3) {
							font-size: .3rem;
							color: #666;
							white-space: nowrap;
						}
					}
					.order_number_date {
						display: flex;
						align-items: flex-end;
						margin: 0 0 .84rem .25rem;
						img {
							width: 3rem;
							height: .18rem;
							margin: 0 .1rem;
						}
					}
				}
				.customer_ratio {
					height: 3.64rem;
					display: flex;
					.new_customer_ratio {
						text-align: left;
						width: 50%;
						height: 80%;
						margin-top: .25rem;
						border-right: 2px dashed #f0f0f0;
						p {
							margin-top: .2rem;
							padding-left: .4rem;
						}
						p:nth-of-type(1) {
							color: #999;
						}
						p:nth-of-type(2) {
							color: #666;
							span {
								font-size: .4rem;
								font-weight: 700;
								color: #333;
							}
						}
						p:nth-of-type(3) {
							color: #666;
						}
						.new_ratio {
							display: flex;
							align-items: center;
							.progress_p {
								width: 1.5rem;
								margin: .22rem 0 0 .2rem;
							}
						}
					}
					.old_customer_ratio {
						border-right: none;
					}
				}
				.set_welfares {
					height: 3.18rem;
					border-top: 1px solid #f0f0f0;
					display: flex;
					justify-content: center;
					align-items: center;
					.set_welfare {
						width: 90%;
						height: 2.58rem;
						background: #efefef;
						border-radius: .05rem;
						.set_welfare_top {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 90%;
							margin: 0 auto;
							height: 50%;
							border-bottom: 2px dashed #bbb;
							p:nth-of-type(1) {
								display: flex;
								align-items: center;
								color: #fdb563;
								img {
									width: .38rem;
									height: .39rem;
									margin-right: .1rem;
								}
							}
							p:nth-of-type(2) {
								display: flex;
								align-items: center;
								color: #07c2af;
								img {
									width: .22rem;
									height: .22rem;
									margin-left: .1rem;
								}
							}
						}
						.set_welfare_bottom {
							width: 90%;
							height: 50%;
							margin: 0 auto;
							text-align: left;
							line-height: 1.14rem;
						}
					}
				}
				.repeat_order {
					border-top: .4rem solid #efefef;
					border-bottom: .4rem solid #efefef;
					.repeat_order_info {
						display: flex;
						padding-bottom: .66rem;
						border-bottom: 1px solid #efefef;
						.repeat_order_ratio,
						.repeat_order_customer {
							width: 50%;
							height: 1.96rem;
							box-sizing: border-box;
							margin-top: .66rem;
							padding-left: .34rem;
							text-align: left;
							p:nth-of-type(1) {
								color: #999;
							}
							p:nth-of-type(2) {
								color: #666;
								margin: .4rem 0;
								span {
									font-size: .4rem;
									font-weight: 700;
								}
							}
							p:nth-of-type(3) {
								color: #999;
							}
						}
						.repeat_order_ratio {
							border-right: 2px dashed #bbb;
						}
					}
					.probably_issues {
						height: 1.56rem;
						display: flex;
						justify-content: center;
						align-items: center;
						.probably_issue {
							width: 90%;
							background: #efefef;
							text-align: left;
							padding: .3rem;
						}
					}
				}
				.customer_trend {
					.customer_trend_header {
						height: 1.14rem;
						display: flex;
						align-items: center;
						border-bottom: 1px solid #f0f0f0;
						img {
							width: .07rem;
							height: .39rem;
						}
						p {
							font-size: .34rem;
							color: #333;
							font-weight: 700;
							margin-left: .16rem;
							span {
								font-size: .26rem;
								color: #999;
								font-weight: 400;
							}
						}
					}
					.trend_infos {
						padding: .2rem;
						.trend_btns {
							width: 80%;
						}
					}
					.charts_info {
						.charts_info_top {
							display: flex;
							p {
								display: flex;
								align-items: center;
								margin-left: .38rem;
								white-space: nowrap;
								img {
									margin-right: .08rem;
								}
								.img_1 {
									width: .18rem;
									height: .04rem;
								}
								.img_2 {
									width: .17rem;
									height: .06rem;
								}
								.img_3 {
									width: .2rem;
									height: .21rem;
								}
								.img_4 {
									width: .23rem;
									height: .23rem;
								}
							}
						}
						.charts_details {
							margin-top: .36rem;
							.charts_detail {
								width: 90%;
								height: 100%;
								margin: 0 auto;
								border: 1px solid #efefef;
							}
						}
					}
				}
			}
		}
		.content2 {
			padding-bottom: .8rem;
			.contents_top {
				display: flex;
				align-items: center;
				padding: .2rem 0;
				background: #efefef;
				border-bottom: 1px solid #dcdcdc;
				img {
					width: .07rem;
					height: .39rem;
				}
				p {
					margin-left: .2rem;
					display: flex;
					align-items: center;
					span {
						font-size: .2rem;
						color: #999;
					}
					img {
						width: .38rem;
						height: .38rem;
					}
				}
			}
			.like_goods {
				background: #fff;
				.like_goods_infos {
					.like_goods_info {
						padding: .5rem 0;
					}
					.like_goods_no {
						padding: .5rem 0;
						img {
							width: 2.2rem;
							height: 2.2rem;
						}
						p {
							color: #9c9c9c;
							margin-top: -.5rem;
						}
					}
				}
			}
			.hobby_infos {
				background: #fff;
				.hobby_info {
					padding: .5rem 0;
				}
				.hobby_no {
					padding: .5rem 0;
					img {
						width: 2.2rem;
						height: 2.2rem;
					}
					p {
						width: 60%;
						color: #9c9c9c;
						margin: -.5rem auto 0 auto;
					}
				}
			}
			.dialog_desc {								
				display: flex;				
				justify-content: center;	
				position: relative;									
				img {					
					width: 5.42rem;
					height: 4.86rem;								
					border-radius: .2rem;
				}
				div{
					position: absolute;
					width: 6rem;
					height: .9rem;
					bottom: 0;					
				}
			}
		}
		.content3 {
			padding-bottom: 2.8rem;
			.customer_acti {
				.customer_text {
					.customer_class {
						display: flex;
						justify-content: space-between;
						padding: 0 .3rem .3rem .3rem;
						font-size: .2rem;
						color: #666;
						background: #fff;
					}
					.active_customer {
						display: flex;
						justify-content: space-between;
						padding: .2rem .3rem;
						border-bottom: 1px solid #f0f0f0;
						background: #fff;
						p {
							font-size: .28rem;
							color: #333;
							span {
								color: #999;
							}
						}
					}
				}
				.edit_group {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: .2rem .3rem;
					background: #fff;
					margin-top: .3rem;
					img {
						width: .24rem;
						height: .24rem;
					}
				}
			}
			.customer_value {
				background: #fff;
				.customer_value_tab {
					width: 90%;
					margin: 0 auto;
					padding: .3rem 0;
				}
				.customer_value_chart_1 {
					border-top: .2rem solid #efefef;
					border-bottom: .2rem solid #efefef;
				}
			}
		}
		footer {
			width: 7.5rem;
			height: 1.2rem;
			background: #323a45;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			p {
				width: 33.33%;
				height: .54rem;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 1px solid #616974;
				color: #989898;
				img {
					width: .5rem;
					height: .5rem;
					margin-right: .1rem;
				}
			}
			p:nth-of-type(3) {
				border-right: none;
			}
			.selected {
				color: #0dbeae;
			}
		}
	}
</style>